﻿<div class="ui-widget-content">
	<h3>Efeitos Animados - Transições de Visibilidade:  Show</h3>
	<p>Animar a "aparição" de um elemento:</p>
	<p>
        <pre>
	        $("#caixa_animada").show( 
	        		efeito, 
	        		[opcoes], 
	        		[velocidade], 
	        		[callback]
	        		);
		</pre>
    </p>
    
	
	<p>Exemplos:</p>
	<p>
	<div style="clear:right; width:80%; height:300px; border:1px solid #ddd; overflow:auto; position:relative; margin: 5px auto;" >
        <div id="botoes_de_efeitos_show" class="ui-widget-content" style="width: 95%; margin: 5px auto; float: left; position: relative;">
			<input type="button" value="blind" />
			<input type="button" value="bounce"/>
			<input type="button" value="clip"/>
			<input type="button" value="drop"/>
			<input type="button" value="explode"/>
			<input type="button" value="fold"/>
			<input type="button" value="highlight"/>
			<input type="button" value="puff"/>
			<input type="button" value="pulsate"/>
			<input type="button" value="scale"/>
			<input type="button" value="shake"/>
			<input type="button" value="size"/>
			<input type="button" value="slide"/>

		</div>

        <div id="caixa_animada_show" class="ui-widget-content" >
            <p>Eu sou uma caixa animada !</p>
        </div>
        
	</div>
	</p>
    

    
    
    <style type="text/css" rel="stylesheet">
		#caixa_animada_show { width: 400px; padding: 5px; margin: 5px auto; float: left; position: relative; }
	</style>
    
    <script type="text/javascript">
        inicializador.efeitosTransicoesShow = function() {
            
    		var executaEfeitoShow = function( efeito ) {
        		// callback function to bring a hidden box back
        		function callback_do_efeito_show() {
        			setTimeout(function() {
        				$( "#caixa_animada_show" ).removeAttr( "style" ).hide();
        			}, 1000 );
        		};

    			// A maioria dos efeitos não necessitam parametros...
    			var options = {};
    			// ...no entanto alguns exigem.
    			if ( efeito === "scale" ) {
    				options = { percent: 0 };
    			} else if ( efeito === "size" ) {
    				options = { to: { width: 70, height: 100 } };
    			}

    			// Executa o efeito.
    			$( "#caixa_animada_show p" ).text(efeito);
    			$( "#caixa_animada_show" ).show( efeito, options, 500, callback_do_efeito_show );
    		};

    		$( "#botoes_de_efeitos_show input" ).click(function() {
    			executaEfeitoShow( $(this).val() );
  	    		return false;
  	    	});
    		$( "#caixa_animada_show" ).hide();
        }
    </script>
</div>